<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<!-- 聊天记录展示区域 -->
		<scroll-view :upper-threshold="200" scroll-y class="kefu"
			:style="{ 'height': `calc(0vh - ${height})`, 'margin-bottom': height, }" @scroll="scroll"
			:scroll-top="top" @scrolltoupper="scrolltoupper">
			<view class="msg-box" :style="{ 'padding-bottom': pdHeight }">
				<template v-for="list in data">
					<!--展示时间 -->
					<view class="centenr" v-if="list.show_time == 1">
						{{ $u.timeFrom(list.c_time, 'yyyy年mm月dd日') }}
					</view>
					<!-- 常见问题 -->
					<view class="Qc" v-if="list.type == 0">
						<view class="title">{{ list.content }}</view>
						<view class="itemList" v-if="list.param && list.param.length">
							<view class="item" v-for="l in list.param" @click="text = l; send()">{{ l }}
							</view>
						</view>
					</view>
					<!-- 1是客服 2 是用户 -->
					<view class="left" v-if="list.type == '1'">
						<view class="imgbox">
							<image class="userimg" style="height: 100%; width: 100%;" :src="list.seat_pic"
								mode="widthFix"></image>
						</view>
						<view class="box">
							<view class="name">{{ list.seat_showname }}</view>
							<view class="content">
								<u-parse :content="list.content"></u-parse>
							</view>
						</view>
					</view>
					<view class="right" v-if="list.type == 2">
						<view class="imgbox">
							<image class="userimg" style="height: 100%; width: 100%;" :src="list.client_pic"
								mode="widthFix">
							</image>
						</view>
						<view class="box">
							<view class="name">{{ list.client_showname }}</view>
							<view class="content" :style="{ 'background-color': app_color, }">
								<u-parse :content="list.content"></u-parse>
							</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
		<!-- 聊天发送框 -->
		<view class="footer">
			<view class="tool">
				<!-- 常见问题 -->
				<view class="tl" :style="{ 'color': app_color }" @click="getQa()">
					<u-icon name="question-circle-fill" :color="app_color" size="32rpx"></u-icon>
					<view class="text">常见问题</view>
				</view>
				<view class="tl" :style="{ 'color': app_color }">
					<u-icon name="photo-fill" :color="app_color" size="32rpx"></u-icon>
					<view class="text">发送图片</view>
				</view>
			</view>
			<view class="sendInfo">
				<view class="comment">
					<!-- #ifdef MP-ALIPAY -->
					<textarea class="zhifubaoText" v-model="text" placeholder="请输入对话内容"
						maxlength="-1" autoHeight />
					<!-- #endif -->

					<!-- #ifndef MP-ALIPAY -->
					<u--textarea class="text" v-model="text" placeholder="请输入对话内容" border="none"
						:maxlength="-1" autoHeight @linechange="handleResize"></u--textarea>
					<!-- #endif -->
				</view>
				<view class="btnArea">
					<view class="btn" :style="{ 'background-color': app_color }" @click="send">发送</view>
				</view>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			top: 1000,
			text: "",
			info: {
				page: 0,
				hasMore: true,
				kefu_token: "",
			},
			data: [],
			last_msg_id: "",
			first_msg_id: "",
			height: '180rpx', // 发送信息区域的高度
			pdHeight: '52rpx',
		}
	},
	mounted() {
		if (this.info.page === 0) {
			let s = setInterval(() => {
				this.info.kefu_token = this.$appData.kefu_token;
				if (this.info.kefu_token.length) {
					this.get(1)
					clearInterval(s)
				}
			}, 100)
		}
		setInterval(() => {
			if (this.$appData.unread && this.$appData.unread > 0 && this.get_cur_page() == 'pages/plugin/kefu/call') {
				console.log(232);
				this.un_read();
			}
		}, 2000);


	},

	methods: {
		handleResize(e) {
			this.getSendInfoHeight();
		},
		getSendInfoHeight() {
			setTimeout(() => {
				// 判断支付宝还是其他
				let query = null;
				// #ifndef MP-ALIPAY
				query = uni.createSelectorQuery().in(this);
				query.select('.sendInfo').boundingClientRect((rect) => {
					if (rect) {
						this.height = rect.height + 'px'; // 发送信息区域的高度
					}
				}).exec();
				query.select('.tool').boundingClientRect((rect) => {
					if (rect) {
						this.pdHeight = rect.height + 'px'; // 工具区域的高度
					}
				}).exec();
				// #endif
			}, 200);
		},
		scroll(e) {

		},
		send() {
			if (!this.text.length) {
				this.msg('请输入内容');
				return false;
			}
			this.moxiPost('/plugin/kefu/index/index/send_msg',
				{ kefu_token: this.info.kefu_token, content: this.text }, (data) => {//
					this.un_read();
					this.text = ''
				}, false)
		},
		getQa() {
			this.moxiPost('/plugin/kefu/index/index/common', { kefu_token: this.info.kefu_token }, (data) => {
				this.un_read()
			}, false)
		},
		un_read() {//获取所有未读消息
			if (this.info.kefu_token === '') {
				return false;
			}
			this.moxiPost('/plugin/kefu/index/index/unread_msg', { kefu_token: this.info.kefu_token, last_msg_id: this.last_msg_id }, (data) => {//
				this.last_msg_id = data.last_msg_id;
				this.$appData.unread = 0;
				for (let k in data.data) {
					this.data.push(data.data[k])
				}
				setTimeout(() => {
					this.top = this.top + 200;
				}, 300)
			}, false)
		},
		scrolltoupper(e) {
			if (this.info.hasMore) {
				this.get(this.info.page + 1)
			}
		},
		get(page) {
			if (page) {
				this.info.page = page;
			}
			this.info.first_msg_id = this.first_msg_id;
			let self = this;
			this.moxiPost('/plugin/kefu/index/index/more_msg', this.info, function (data) {
				if (self.info.page == 1) {
					setTimeout(() => {
						self.top = 99999;
					}, 200)
					self.first_msg_id = data.data.first_msg_id;
					self.last_msg_id = data.data.first_msg_id;
				}
				if (data.data.allpage > data.data.page) {
					self.info.hasMore = true;
				} else {
					self.info.hasMore = false;
				}
				if (data.data.data) {
					for (let k in data.data.data) {
						self.data.unshift(data.data.data[k])
					}

				}

			})
		},
		// 系统色转rgb
		hexToRgb(hex) {
			// 移除#号
			hex = hex.replace(/^#/, '');
			// 解析为r, g, b值
			const r = parseInt(hex.substring(0, 2), 16);
			const g = parseInt(hex.substring(2, 4), 16);
			const b = parseInt(hex.substring(4, 6), 16);
			return `${r}, ${g}, ${b}`;
		},
	}
}
</script>

<style lang="scss" scoped>
.kefu {
	flex: 1;

	.msg-box {
		padding: 0 16rpx;

		.centenr {
			text-align: center;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 32rpx;
		}

		.Qc {
			padding: 32rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 48rpx;

			.title {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.itemList {
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				.item {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 20rpx;
					color: #999;
					padding-bottom: 8rpx;

					border-bottom: 0.5px solid rgba($color: #b1b1b1, $alpha: 0.1);

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		// 公共消息样式
		.left,
		.right {
			display: flex;
			margin-bottom: 48rpx;

			.imgbox {
				flex-shrink: 0;
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					height: 44rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #555555;
					margin-bottom: 8rpx;
				}

				.content {
					flex-shrink: 0;
					color: #fff;
					border-radius: 12rpx;
					padding: 8rpx 24rpx;
					font-size: 32rpx;

					word-break: break-all; //对英文有效，在溢出处换行
					text-align: justify; //文字向两侧对齐，对最后一行无效。
					text-justify: auto;
				}
			}
		}

		// 左侧消息样式
		.left {
			margin-right: 48rpx;

			.imgbox {
				margin: 8rpx 24rpx 8rpx 0;
			}

			.box {
				.content {
					background-color: #fff;
					color: #333;
				}
			}
		}

		// 右侧消息样式
		.right {
			margin-left: 48rpx;
			flex-direction: row-reverse;

			.imgbox {
				margin: 8rpx 0 8rpx 24rpx;
			}

			.box {
				.name {
					text-align: right;
				}
			}
		}
	}
}

.footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;

	.tool {
		display: flex;
		flex-direction: row;
		gap: 16rpx;
		margin-bottom: 24rpx;
		padding: 0 10rpx;

		.tl {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 6rpx;
			font-size: 28rpx;

			padding: 4rpx 24rpx;

			background-color: #fff;

			border-radius: 99rpx;

			.zhifubaoText {
				height: 44rpx;
				line-height: 44rpx;
			}

			.text {
				height: 44rpx;
				line-height: 44rpx;
			}
		}
	}

	.sendInfo {
		background-color: #fff;
		padding: 32rpx 24rpx 24rpx 32rpx;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius: 12rpx 12rpx 0 0;

		.comment {
			width: 100%;
			border: 0.5px solid rgba($color: #b1b1b1, $alpha: 0.1);
			margin-right: 8rpx;
			border-radius: 12rpx;
			padding: 0 !important;
			min-height: 50rpx !important;
			max-height: 210rpx !important;
			overflow-y: auto !important;
		}

		.btnArea {
			white-space: nowrap;
			display: flex;
			align-items: flex-end;

			.btn {
				border-radius: 12rpx;

				font-size: 32rpx;
				color: #fff;
				padding: 16rpx 64rpx;
			}
		}
	}
}
</style>
